<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>批量导入</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/oauthplatform/static/css/x-admin/font.css">
    <link rel="stylesheet" href="/oauthplatform/static/css/x-admin/xadmin.css">
    <link rel="stylesheet" href="/oauthplatform/static/lib/zTree/css/zTreeStyle/zTreeStyle.css">
    <style>
        .layui-textarea { display: block; width: 70%; padding-left: 10px; }
        .template-box, .upload-box {
            width: 75%;
            height: 33.33%;
            float: left;
            padding: 20px;
            border: 1px solid #ddd;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin-left: 55px;
            margin-top: 30px;
            margin-bottom: 10px;
            text-align: center;
        }
        .template-title, .upload-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 15px;
        }
        .template-desc, .upload-desc {
            color: #999;
            font-size: 14px;
            margin-bottom: 20px;
        }
        .upload-file-name {
            margin-top: 10px;
        }
        .layui-row button {
            margin-right: 10px;
        }
        .upload-box .layui-upload-button,
        .layui-row .layui-btn-normal {
            background-color: #1E9FFF;
            color: #fff;
        }
        .layui-row .layui-btn-primary {
            background-color: #fff;
            color: #333;
        }
        .layui-row {
            text-align: center;
        }
        .center-buttons {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <!-- 下载模板框子 -->
        <div class="template-box">
            <div class="template-title">下载学校信息模板</div>
            <div class="template-desc">
                <p>请按照数据模板的格式准备导入数据，模板中的表头名称不可更改，表头行不能删除</p>
            </div>
            <button class="layui-btn" id="downloadTemplateHigh">下载高职学校导入模板.xlsx</button>
            <button class="layui-btn" id="downloadTemplateCenter">下载中职学校导入模板.xlsx</button>
        </div>

        <!-- 上传文件框子 -->
        <div class="upload-box">
            <div class="upload-title">上传填好的学校信息(表)</div>
            <div class="upload-desc">
                <p>文件后缀名必须为xlsx(即Excel格式)，文件大小不得大于10M</p>
            </div>
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="uploadButton">选择文件</button>
                <input type="file" name="file" class="layui-upload-file" id="fileInput">
                <div class="upload-file-name"></div>
            </div>
        </div>
    </div>
    <div class="layui-row center-buttons">
        <button class="layui-btn layui-btn-primary">取消</button>
        <button class="layui-btn layui-btn-normal" id="ID-upload-demo-action">批量导入</button>
    </div>
</div>

<script type="text/javascript" src="/oauthplatform/static/lib/layui/layui.all.js" charset="utf-8"></script>
<script type="text/javascript" src="/oauthplatform/static/lib/jquery/jquery.3.4.1.js"></script>
<script type="text/javascript" src="/oauthplatform/static/lib/x-admin/xadmin.js"></script>
<script src="/oauthplatform/static/lib/other/html5.min.js"></script>
<script src="/oauthplatform/static/lib/other/respond.min.js"></script>
<script src="/oauthplatform/static/lib/zTree/js/jquery.ztree.all.js"></script>
<script type="application/javascript">
    layui.use(['upload', 'layer'], function () {
        var upload = layui.upload;
        var layer = layui.layer;

        // 下载模板按钮点击事件 高职
        $('#downloadTemplateHigh').on('click', function () {
            window.location.href = '/oauthplatform/excel/download/template/'+1;
        });
        // 下载模板按钮点击事件 中职
        $('#downloadTemplateCenter').on('click', function () {
            window.location.href = '/oauthplatform/excel/download/template/' + 2;
        });

        // 文件上传
        upload.render({
            elem: '#uploadButton',
            url: '/oauthplatform/excel/import',
            accept: 'file', // 只允许上传文件
            exts: 'xlsx', // 只允许上传xlsx格式的文件
            auto: false,
            bindAction: '#ID-upload-demo-action',
            done: function (res) {
                if (parseInt(res.code) === 200) {
                    let successListNum = res.data.successList;
                    let failListNum = res.data.failList;
                    layer.msg('上传成功条数: '+successListNum+"\t失败条数: "+failListNum);
                } else if(parseInt(res.code) === 500) {
                    layer.msg(res.msg);
                }
            },
         error: function () {
                layer.msg('上传失败，可能是某些数据没有输入完整', {icon: 2});
            }
        });
    });
</script>
</body>
</html>
